import 'package:flutter/material.dart';

import 'customhuakuai.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('RangeSlider Example')),
        body: Center(
          child: MyRangeSlider(),
        ),
      ),
    );
  }
}

class MyRangeSlider extends StatefulWidget {
  @override
  _MyRangeSliderState createState() => _MyRangeSliderState();
}

class _MyRangeSliderState extends State<MyRangeSlider> {
  ValueNotifier<RangeValues> _valuesNotifier = ValueNotifier<RangeValues>(RangeValues(20, 80));

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderThemeData(
        activeTrackColor: Colors.red,
        inactiveTrackColor: Colors.green,
        thumbColor: Colors.yellow,
        rangeThumbShape: const CustomRoundRangeSliderThumbShape(
          enabledThumbRadius: 6.0,
          pressedElevation: 3.0,
        ),
        trackHeight: 2,
        overlayColor: Colors.blue.withOpacity(0.2),
        overlayShape: const RoundSliderOverlayShape(overlayRadius: 24),
        valueIndicatorColor: Colors.brown,
        valueIndicatorShape: const PaddleSliderValueIndicatorShape(),
        valueIndicatorTextStyle: TextStyle(
          fontSize: 12,
          color: Colors.white,
          fontWeight: FontWeight.w400,
        ),
        showValueIndicator: ShowValueIndicator.always,
      ),
      child: Container(
        color: Colors.black12,
        child: Column(mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
          Text(
              'Selected Range: ${_valuesNotifier.value.start.round()} - ${_valuesNotifier.value.end.round()}'), // 显示当前范围值，可选格式化输出为整数形式。
          ValueListenableBuilder(
              valueListenable: _valuesNotifier,
              builder: (context, value, child) {
                return RangeSlider(
                  values: _valuesNotifier.value, // 当前滑块范围值。
                  min: 0.0, // 最小值。
                  max: 100.0, // 最大值。
                  onChanged: (RangeValues value) {
                    print("---$value");
                    _valuesNotifier.value = value; // 更新滑块范围值。
                  },
                  divisions: 10, // 分割数，用于控制滑块的精度。,
                  labels: RangeLabels("开始", "结束"),
                );
              }),
          Container(
            color: Colors.red,
            width: 1000,
            height: 100,
          ),
        ]),
      ),
    );
  }
}
